<template>
  <Layout>
    <Header style="width: 100%; margin-top: -2%">
      <MyHeader />
    </Header>
    <Content class="content">
      <el-card class="tableCard">
        <el-form>
          <el-form-item label="测试厂商:">
            <el-select v-model="company" placeholder="请选择测试厂商">
              <el-option
                v-for="(item, index) in deviceUsersList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card style="height: 70vh">
              <div slot="header">
                <div style="font-size: 20px; font-weight: bold">摄像头状态</div>
              </div>
              <el-form inline class="formStyle">
                <el-form-item label="摄像头总数:">
                  <div>{{ cameraStatus.total_count }}</div>
                </el-form-item>
                <el-form-item label="设备在线数:">
                  <div>{{ cameraStatus.total_online_count }}</div>
                </el-form-item>
                <el-form-item label="阿里云在线数:">
                  <div>{{ cameraStatus.total_ali_online_count }}</div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="handleRefresh"
                    >刷新</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table
                :data="cameras"
                border
                style="height: 600px"
                max-height="600"
                v-loading="loading_left"
              >
                <el-table-column
                  prop="cameraNum"
                  label="摄像头编号"
                ></el-table-column>
                <el-table-column
                  prop="ali_online"
                  label="阿里云在线状态"
                ></el-table-column>
                <el-table-column
                  prop="online"
                  label="设备在线状态"
                ></el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="height: 70vh">
              <div slot="header">
                <div style="font-size: 20px; font-weight: bold">推流控制</div>
              </div>
              <el-form :inline="true" v-model="formInline">
                <el-form-item label="推流路数:">
                  <el-input-number
                    v-model="formInline.streamNums"
                    :min="1"
                    :max="100"
                  ></el-input-number>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handlePushStream"
                    >开始推送</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="small"
                    @click="dialogVisible = !dialogVisible"
                    >参数设置</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleTaskRefresh"
                    >刷新</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table
                ref="multipleTable"
                :data="taskInfo"
                border
                v-loading="loading_right || loading"
                tooltip-effect="dark"
                style="height: 600px"
                max-height="600"
              >
                <el-table-column
                  prop="task_id"
                  label="task_id"
                ></el-table-column>
                <el-table-column label="cameraNums">
                  <template slot-scope="scope">
                    <el-form>
                      <el-select :value="cameraNum" placeholder="下拉查看列表">
                        <el-option
                          v-for="(item, index) in scope.row.cameraNums"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="start_date"
                  label="start_date"
                ></el-table-column>
                <el-table-column
                  prop="stop_date"
                  label="stop_date"
                ></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleStopStream(scope.row)"
                      >停止</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- <div style="margin-top:10px">
                <el-button type="primary" @click="handleStopStream">批量停止</el-button>
              </div>-->
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-dialog title="推流参数配置" :visible.sync="dialogVisible" width="30%">
        <el-form v-model="configForm" label-width="150px" label-position="left">
          <el-form-item label="参数配置:">
            <el-select v-model="configForm.configType" @change="configchange">
              <el-option
                v-for="(item, index) in config"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Videotype:">
            <el-input
              v-model="configForm.videoType"
              style="width: 270px"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="Width:">
            <el-input
              v-model="configForm.width"
              style="width: 270px"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="Height:">
            <el-input
              v-model="configForm.height"
              style="width: 270px"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="Bitrate:">
            <el-input
              v-model="configForm.bitrate"
              style="width: 270px"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="Iframe:">
            <el-input
              v-model="configForm.iframe"
              style="width: 270px"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="Framerate:">
            <el-input
              v-model="configForm.framerate"
              style="width: 270px"
              readonly
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </Content>
  </Layout>
</template>

<script>
import MyHeader from "./Header.vue";
import { mapActions, mapState, mapGetters } from "vuex";

export default {
  components: {
    MyHeader,
  },
  methods: {
    ...mapActions([
      "getDeviceUsers",
      "queryCameraStatus",
      "queryPushStream",
      "queryTaskInfo",
      "queryStopStream",
    ]),
    handleRefresh() {
      if (this.company) {
        this.loading_left = true;
        const params = {
          username: this.company,
        };
        this.queryCameraStatus(params).then(() => {
          this.loading_left = false;
        });
      } else {
        this.$message({
          message: "请先选择厂商",
          type: "warning",
        });
      }
    },
    configchange(data) {
      this.configObject = this.configData[data];
      this.configForm = {
        ...this.configObject,
        configType: this.configForm.configType,
      };
    },
    handlePushStream() {
      if (this.loading) {
        this.$message({
          message: "正在推送，请稍后再试",
          type: "warning",
        });
        return;
      }
      if (!this.configObject) {
        this.$message({
          message: "请选择配置参数",
          type: "warning",
        });
        return;
      }
      if (!this.company) {
        this.$message({
          message: "请先选择厂商",
          type: "warning",
        });
        return;
      }
      this.loading = true;
      let formParams = new FormData();
      for (let item in this.configObject) {
        formParams.append(item, this.configObject[item]);
      }
      formParams.append("push_num", this.formInline.streamNums);
      const company = this.company;
      this.queryPushStream({ formParams, company })
        .then((value) => {
          this.handleTaskRefresh();
          this.handleRefresh();
        })
        .then(() => {
          this.loading = false;
        })
        .catch((err) => {
          if (err === 500) {
            this.$message({
              message: "推流失败!",
              type: "error",
            });
          }
          this.loading = false;
        });
    },
    handleSelectionChange(val) {
      this.selectTasks = val.map((item) => {
        return item.task_id;
      });
    },
    handleStopStream(data) {
      const company = this.company;
      const tasks = data.task_id;
      let formParams = new FormData();
      formParams.append("task_id", tasks);
      this.queryStopStream({ formParams, company })
        .then(() => {
          this.$message({
            message: "任务停止成功",
            type: "success",
          });
          this.handleTaskRefresh();
        })
        .catch(() => {
          this.$message({
            message: "任务停止失败",
            type: "error",
          });
        });
    },
    handleTaskRefresh() {
      if (!this.company) {
        this.$message({
          message: "请先勾选厂商",
          type: "warning",
        });
        return;
      }
      this.loading_right = true;
      const company = this.company;
      return new Promise((resolve, reject) => {
        let params = {
          username: company,
        };
        let reqObj = {
          params: params,
          filterStartDateFlag: false, //表示不过滤start_date为-1的
        };

        this.queryTaskInfo(reqObj)
          .then(() => {
            this.loading_right = false;
          })
          .then(() => {
            resolve();
          });
      });
    },
  },
  computed: {
    ...mapState([
      "deviceUsersList",
      "cameraStatus",
      "streamTaskInfo",
      "taskInfo",
    ]),
    ...mapGetters(["cameras"]),
  },
  mounted() {
    this.getDeviceUsers();
  },
  data() {
    return {
      cameraNum: "",
      loading: false,
      loading_left: false,
      loading_right: false,
      dialogVisible: false,
      selectTasks: [],
      configForm: {
        configType: "",
        Videotype: "",
        Width: "",
        Height: "",
        Bitrate: "",
        Iframe: "",
        Framerate: "",
      },
      company: "",
      configObject: null,
      formInline: {
        streamNums: "",
      },
      config: [
        {
          label: "配置1",
          value: "0",
        },
        {
          label: "配置2",
          value: "1",
        },
        {
          label: "配置3",
          value: "2",
        },
        {
          label: "配置4",
          value: "3",
        },
        {
          label: "配置5",
          value: "4",
        },
      ],
      configData: [
        {
          videoType: 0,
          width: 352,
          height: 288,
          bitrate: 32,
          iframe: 50,
          framerate: 25,
        },
        {
          videoType: 0,
          width: 352,
          height: 288,
          bitrate: 64,
          iframe: 50,
          framerate: 25,
        },
        {
          videoType: 0,
          width: 352,
          height: 288,
          bitrate: 128,
          iframe: 50,
          framerate: 25,
        },
        {
          videoType: 1,
          width: 704,
          height: 576,
          bitrate: 1024,
          iframe: 50,
          framerate: 25,
        },
        {
          videoType: 1,
          width: 1920,
          height: 1080,
          bitrate: 1024,
          iframe: 50,
          framerate: 25,
        },
      ],
    };
  },
};
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tableCard {
  margin-top: 2vh;
  width: 95vw;
  height: 80vh;
}
.formStyle {
  width: 700px;
  display: flex;
  justify-content: space-around;
}
</style>
